<template>
	<view>
		<view v-for="(item , index) in groupList" :key="index" class="list">
			<view class="item">
				{{item}}
			</view>
			<u-icon name="close" color="red" size="28" @click="delGroupName(index)"></u-icon>
		</view>

		<view class="list" v-if="show">
			<view class="item" @click="addname">
				{{name}}
			</view>
			<u-icon name="checkmark" size="28" @click="addGroupName"></u-icon>
		</view>

		<view class="list" style="justify-content: center;" @click="show = !show">
			<u-icon name="plus" size="28"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupList: [],
				enterprise: {},
				name: "点击输入名称",
				show: false
			};
		},
		onLoad() {
			this.groupList = JSON.parse(uni.getStorageSync("groupList"))
		},
		methods: {
			addname() {
				let that = this;
				uni.showModal({
					title: "请输入名称：",
					editable: true,
					success: function(res) {
						if (res.confirm) {
							if (res.content == "") {
								uni.showToast({
									icon: "error",
									title: "名称为空"
								})
							} else {
								that.name = res.content;
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			addGroupName() {
				if (this.groupList.indexOf(this.name) == -1) {
					this.groupList.push(this.name)
					uni.request({
						url: getApp().url + 'user/update',
						data: {
							userId: uni.getStorageSync("userId"),
							groupList: JSON.stringify(this.groupList)
						},
						header: {
							token: uni.getStorageSync("token")
						},
						method: "POST",
						success: (response) => {
							if (response.data.code == -1) {
								return uni.showToast({
									icon: "error",
									title: response.data.msg
								});
							};
							uni.setStorageSync("groupList", JSON.stringify(this.groupList));
						},
						fail: (error) => {
							console.log(error);
						}
					})
				} else {
					uni.showToast({
						title: "此分组已存在",
						icon: "error"
					})
				}

			},
			delGroupName(index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗，删除后好友将移动到“我的好友”分组',
					success: function(res) {
						if (res.confirm) {
							var groupName = that.groupList[index];
							that.groupList.splice(index, 1);
							if (that.groupList.indexOf("我的好友") == -1) {
								that.groupList.push("我的好友")
							}

							uni.request({
								url: getApp().url + 'user/delGroupName',
								data: {
									userId: uni.getStorageSync("userId"),
									groupList: JSON.stringify(that.groupList),
									groupName: groupName
								},
								header: {
									token: uni.getStorageSync("token")
								},
								method: "GET",
								success: (response) => {
									if (response.data.code == -1) {
										return uni.showToast({
											icon: "error",
											title: response.data.msg
										});
									};

									uni.setStorageSync("groupList", JSON.stringify(that.groupList));
								},
								fail: (error) => {
									console.log(error);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.list {
		display: flex;
		justify-content: space-between;
		margin: 5vw 5vw;
		height: 40px;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

		.item {
			width: 80vw;
			line-height: 40px;
			text-align: center;
		}
	}
</style>